﻿<<template>
  <div calss="table">
      <!--表7桑园套种农作物情况调查表T_MulInterCrops-->
      <div class="divSearch">
            <Row>
                <Col span="24" class="col-margin">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..." style="width: 100px" @on-change="getPageData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                    填报年度：
                    <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictText">{{item.DictText}}</Option>
                    </Select>
                    报表状态：
                    <Select v-show="this.userinfo.AreaCode=='530000000000'&&this.userinfo.Account=='530000'" v-model="searchModel.StatusTwo" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictValue" v-for="item in ReStatusList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                    <Select v-show="this.userinfo.Account!='530000'" v-model="searchModel.Status" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictValue" v-for="item in ReStatusList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                    <Button icon="ios-search" type="ghost" @click="getPageData()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
                        查询
                    </Button>
                </Col>
            </Row>
      </div>
    <Row>
        <Col span="24" class="col-margin">
        <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
        </Col>
    </Row>
    <Row>
        <Col span="24" class="dataTable">
        <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
        </Col>
    </Row>
      <Modal v-model="showType" :mask-closable="false" :closable="true" width="1000">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">桑园套种农作物情况审核</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="reptable">
                <thead>
                    <tr>
                        <th rowspan="2" style="width:20%">套种作物名称</th>
                        <th rowspan="2" style="width:20%">面积（亩）</th>
                        <th rowspan="2" style="width:20%">产值（万元）</th>
                        <th rowspan="2" style="width:30%">备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="dataitem in dataList" :key="dataitem.Id">
                        <td>
                            {{dataitem.SortName}}
                        </td>
                        <td>
                            {{dataitem.Area|formatCurrency}}
                        </td>
                        <td>
                            {{dataitem.OutputValue|formatCurrency}}
                        </td>
                        <td>
                            {{dataitem.Remark}}
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td style="text-align: center;">
                        合计
                        </td>
                        <td>
                            {{TotalArea|formatCurrency}}
                        </td>
                        <td>
                            {{TotalOutputValue|formatCurrency}}
                        </td>
                        <td>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <div slot="footer">
                <div style="text-align:right;padding-top:5px;">
                <Button type="primary" @click="saveSure()">审核通过</Button>
                <Button type="warning" @click="saveUnSure()">审核不通过</Button>
                </div>
                <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
                    备注: 1、合计面积=马铃薯面积+大豆面积+蚕豆面积+辣椒面积+其它面积
                    <br/><br/>2、合计产值=马铃薯产值+大豆产值+蚕豆产值+辣椒产值+其它产值
                    <br/><br/>3、面积单位：亩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产值单位：万元
                <span slot="desc">
                </span>
                </Alert>
            </div>
        </Modal>
        <Modal v-model="ViewShow" :mask-closable="false" :closable="true" width="1000">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">桑园套种农作物情况审核</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="reptable">
                <thead>
                    <tr>
                        <th rowspan="2" style="width:20%">套种作物名称</th>
                        <th rowspan="2" style="width:20%">面积（亩）</th>
                        <th rowspan="2" style="width:20%">产值（万元）</th>
                        <th rowspan="2" style="width:30%">备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="dataitem in dataList" :key="dataitem.Id">
                        <td>
                            {{dataitem.SortName}}
                        </td>
                        <td>
                            {{dataitem.Area|formatCurrency}}
                        </td>
                        <td>
                            {{dataitem.OutputValue|formatCurrency}}
                        </td>
                        <td>
                            {{dataitem.Remark}}
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td style="text-align: center;">
                        合计
                        </td>
                        <td>
                            {{TotalArea|formatCurrency}}
                        </td>
                        <td>
                            {{TotalOutputValue|formatCurrency}}
                        </td>
                        <td>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
                    备注: 1、合计面积=马铃薯面积+大豆面积+蚕豆面积+辣椒面积+其它面积
                    <br/><br/>2、合计产值=马铃薯产值+大豆产值+蚕豆产值+辣椒产值+其它产值
                    <br/><br/>3、面积单位：亩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产值单位：万元
                    <span slot="desc">
                    </span>
                </Alert>
            </div>
        </Modal>
        <Modal v-model="showAudit" :mask-closable="false" width="500">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">审核不通过原因</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <Input v-model="strMsg" type="textarea" :rows="4" placeholder="请输入不通过原因..."></Input>
            <div slot="footer">
                <Button type="primary" @click="sureUnSure()">确定</Button>
                <Button type="ghost" @click="cancelUnSure()" style="margin-left: 8px">取消</Button>
            </div>
      </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const validateNumber = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value < 18) {
          callback(new Error("必须年满18岁"));
        } else {
          callback();
        }
      }
    };
    return {
      datas: {}, //table数据对象
      dataList: [],
      TotalArea: 0,
      TotalOutputValue: 0,
      dataIds: [],
      AreaTotal: 0,
      ValTotal: 0,
      showAudit: false,
      strMsg: "",
      Id: "",
      AreaList: [],
      CurrentYear: this.GetCurrentYear(), //当前年度
      userinfo: this.GetlocaStorage("CSuserinfo"),
      TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
      CreateYearList: this.GetGroupDict("ReportYear"), //上报年份
      CycleList: this.GetGroupDict("ReportCycle"), //周期
      ReStatusList: this.GetGroupDict("ReportStatus"), //报表状态
      pageSizeOpts: [20, 40, 50], //默认分页最大设置
      showType: false, //编辑框弹出状态
      ViewShow: false,
      selectTabName: "",
      TabTitleList: [], //tab选项卡列表
      TabTitleListTwo: [], //table选项卡列表
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: "MulInterCrops",
        FillInYear: this.CurrentYear+'年',
        TimesType: "",
        AreaCode: "",
        PageNumber: 1,
        PageSize: 20
      },
      dataModel: {
        //编辑模型
        Id: 0,
        ReportId: "",
        SeedSize: "",
        FreshCocoonYield: "",
        AveFreshCocoon: "",
        SmallRearSilk: "",
        NextSeaOutPut: "",
        NextSeaFresh: ""
      },
      ctx: this, //table数据上下文
      columnsList: [
        { title: "报表名称", key: "ReportName" },
        // { title: "填报年度", key: "FillInYearName",  },
        // { title: "属行政区划", key: "AreaCodeName",  },
        // { title: "填报周期", key: "TimesTypeName",  },
        {
          title: "报表状态",
          key: "StatusName",
          width: 150,
          render: (h, params) => {
            switch (params.row.Status * 1) {
              case 0: //审核未通过
                return h(
                  "span",
                  { class: { Error: true } },
                  params.row.StatusName
                );
              case 1: //未填写
                return h(
                  "span",
                  { class: { NoReport: true } },
                  params.row.StatusName
                );
              case 2: //已填写
                return h(
                  "span",
                  { class: { AlreadyReport: true } },
                  params.row.StatusName
                );
              case 3: //已上报
                return h(
                  "span",
                  { class: { UpReport: true } },
                  params.row.StatusName
                );
              case 4: //审核通过
                return h(
                  "span",
                  { class: { Success: true } },
                  params.row.StatusName
                );
              case 5: //锁定
                return h(
                  "span",
                  { class: { error: true } },
                  params.row.StatusName
                );
              default:
                return h(
                  "span",
                  { class: { Default: true } },
                  params.row.StatusName
                );
            }
          }
        },
        { title: "新增时间", key: "StrAddTime", width: 180 },
        // { title: "填报时间", key: "StrUpdateTime",  },
        {
          title: "操作",
          key: "Id",
          width: 260,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  class: { ieditColor: true },
                  props: {
                    type: "ghost",
                    size: "small",
                    icon: "ios-paper-outline"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.showInfo(params.row.Id, params.row.ReportCode,params.row.AreaCode);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  class: { irefreshColor: true },
                  props: {
                    type: "ghost",
                    size: "small",
                    icon: "network",
                    disabled: params.row.Status == 4 || params.row.Status < 3
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editInfo(params.row.Id, params.row.ReportCode,params.row.AreaCode);
                    }
                  }
                },
                "审核"
              ),
              h(
                "Button",
                {
                  class: { ideleteColor: true },
                  props: {
                    type: "ghost",
                    size: "small",
                    icon: "ios-undo",
                    disabled: params.row.Status < 4
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.unReview(params.row.Id);
                    }
                  },
                  directives: [
                    {
                      name: "omg-operation",
                      value: { op: "unreview" }
                    }
                  ]
                },
                "取消审核"
              )
            ]);
          }
        }
      ],
      clientHeight: window.innerHeight - 260 //表格默认高度
    };
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 260;
      })();
    };
  },
  methods: {
    //获取当前地区包含区(县)市(州)
    SearchAreaList() {
      var areaCode = this.userinfo.AreaCode;
      var areaList = [];
      if (areaCode != "530000000000" && areaCode != null) {
        var item = this.GetlocaStorage("areatreelist")[0];
        for (var i = 0; i < item.children.length; i++) {
          if (item.children[i].value == areaCode) {
            areaList.push(item.children[i]);
          }
        }
      } else {
        areaList = this.GetlocaStorage("areatreelist");
      }
      this.AreaList = areaList[0].children;
    },
    upReport(id) {
      var self = this;
      self.$Modal.confirm({
        title: "提示信息",
        content: "<p>是否确认上报？</p>",
        onOk: () => {
          var model = new Object();
          model.Id = id;
          model.reportType = "3";
          model.strMsg = "";
          this.$http.post("Report/PostUpStatus", model).then(function(res) {
            if (res.data.status == 1) {
              self.$Notice.success({ title: "已上报！", desc: false });
              self.getPageData();
            } else {
              self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
            }
          });
        }
      });
    },
    //查看报表
    showInfo(id, reportCode,AreaCode) {
      var self = this;
      this.searchModel.AreaCode = AreaCode;
      if (self.searchModel.FillInYear != null &&self.searchModel.FillInYear != "") {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      this.$http.post("MulInterCrops/PostAllList", this.searchModel).then(
        //获取数据编辑项的值
        function(res) {
          switch (res.data.status) {
            case 1:
              self.dataList = res.data.model.ResultList;
              self.ViewShow = true;
              break;
            case 0:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
            case -1:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
          }
        }
      );
    },
    //获取当前页码
    getPageNumber(pageIndex) {
      this.searchModel.PageNumber = pageIndex;
      this.getPageData();
    },
    //获取当前分页大小
    getPageSize(pageSize) {
      this.searchModel.PageSize = pageSize;
      this.getPageData();
    },
    //获取this.datas: {},//table数据对象
    getPageData() {
      var self = this;
      //判断是否为省级用户
      if (
        self.userinfo.AreaCode == "530000000000" &&
        self.userinfo.Account == "530000"
      ) {
        self.searchModel.Status = self.searchModel.StatusTwo;
      } else {
        self.searchModel.Status = self.searchModel.Status;
      }
      if (self.searchModel.FillInYear != null &&self.searchModel.FillInYear != "") {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      self.$http
        .post("Report/PostReviewPageList", this.searchModel)
        .then(function(res) {
          if (res.data.status === 1) {
            self.datas = res.data;
          } else {
            self.$Modal.error({ title: "提示信息", content: res.data.message });
          }
        });
    },
    //审核
    save(model) {
      var self = this;
      this.$http.post("Report/PostUpStatus", model).then(function(res) {
        if (res.data.status == 1) {
          self.$Notice.success({ title: "审核完成!", desc: false });
          self.getPageData();
          self.strMsg = "";
          self.modalHide();
        } else {
          self.$Modal.error({ title: "提示信息", content: "数据审核失败!!!" });
        }
      });
    },
    saveSure() {
      var model = new Object();
      model.Id = this.Id;
      model.reportType = "4";
      model.strMsg = "";
      this.save(model);
      this.modalHide();
    },
    //审核未通过
    saveUnSure() {
      var self = this;
      this.showAudit = true;
    },
    sureUnSure() {
      var self = this;
      this.showAudit = false;
      var model = new Object();
      model.Id = self.Id;
      model.reportType = "0";
      model.strMsg = this.strMsg;
      this.save(model);
    },
    cancelUnSure() {
      this.showAudit = false;
      //this.modalHide();
      this.strMsg = "";
    },
    //省级取消审核
    unReview(id, reportCode) {
      var model = new Object();
      model.Id = id;
      model.reportType = "0";
      model.strMsg = "省级已取消审核!";
      this.save(model);
    },
    //编辑获取对象传入id
    editInfo(id, reportCode,AreaCode) {
      var self = this;
      this.searchModel.AreaCode = AreaCode;
      if (self.searchModel.FillInYear != null &&self.searchModel.FillInYear != "") {
        self.searchModel.FillInYear = self.searchModel.FillInYear; //获取当前系统年份
      } else {
        self.searchModel.FillInYear = self.CurrentYear + "年"; //获取填报年度-----数据字典值
      }
      this.$http.post("MulInterCrops/PostAllList", self.searchModel).then(
        //获取数据编辑项的值
        function(res) {
          switch (res.data.status) {
            case 1:
              self.dataList = res.data.model.ResultList;
              self.Id=res.data.model.ReportId;
              self.modalShow();
              break;
            case 0:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
            case -1:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
          }
        });
    },
    //审核
    save(model) {
      var self = this;
      this.$http.post("Report/PostUpStatus", model).then(function(res) {
        if (res.data.status == 1) {
          self.$Notice.success({ title: "审核完成!", desc: false });
          self.getPageData();
          self.strMsg = "";
          self.modalHide();
        } else {
          self.$Modal.error({ title: "提示信息", content: "数据审核失败!!!" });
        }
      });
    },
    findItemList(tabname) {
      var list = [];
      for (var i = 0; i < this.TabTitleList.length; i++) {
        if (this.TabTitleList[i].SortCode == tabname) {
          list = this.TabTitleList[i].list;
          break;
        }
      }
      return list;
    },
    //查询行政区划级联选择
    SearchCascaderChange(value, selectedData) {
      const index = value.length - 1;
      this.searchModel.AreaCode = value[index];
    },
    //编辑框打开
    modalShow() {
      this.showType = true;
    },
    //编辑框关闭
    modalHide() {
      this.showType = false;
    },
    //取消方法
    cancel() {
      this.showType = false; //关闭modal
      this.TabTitleList = [];
    },
    //重置model
    restModel(modelname) {
      this.$refs[modelname].resetFields(); //重置model
    },
    getTotal:function(){
      this.TotalArea=0;
      this.TotalOutputValue=0;
      for (let index = 0; index < this.dataList.length; index++) {
        const element = this.dataList[index];
        this.TotalArea+=element.Area*1;
        this.TotalOutputValue+=element.OutputValue*1;
      }
    }
  },
  //创建Vue页面方法
  created: function() {
    //创业Vue前调用获取this.datas: {},//table数据对象
    this.getPageData();
    this.SearchAreaList();
  },
  watch: {
    //需要监听的在此处新增监听对象
    dataList: {
　　　　handler(newValue, oldValue) {
　　　　　　this.getTotal();
　　　　},
　　　　deep: true
　　}
  }
};
</script>
